<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body onload="draw()">
    <canvas id="mycanvas" width="150" height="150"></canvas>
    <script >
        function draw() {
            const canvasId = $("#mycanvas")[0];
            if (canvasId.getContext) {
                const ctx = canvasId.getContext("2d");
                // 填充三角形
                ctx.beginPath();
                ctx.moveTo(25,25);
                ctx.lineTo(105,25);
                ctx.lineTo(25,105);
                ctx.fill();

                // 描边三角形
                ctx.beginPath();
                ctx.moveTo(125,125);
                ctx.lineTo(125,45);
                ctx.lineTo(45,125);
                ctx.closePath();
                ctx.stroke();
            }
        }
    </script>
</body>
</html>